<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calendar</title>
    <style>
        .calendar {
            width: 300px;
            margin: 50px auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background-color: #f4f4f4;
        }

        .prev-month, .next-month {
            cursor: pointer;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            width: 14.28%;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #ddd;
        }

        td.current-day {
            background-color: #007bff;
            color: white;
        }

    </style>
</head>
<body>
<div class="calendar">
    <div class="header">
        <span class="prev-month">Prev</span>
        <h2 id="month-year"></h2>
        <span class="next-month">Next</span>
    </div>
    <table>
        <thead>
        <tr>
            <th>S</th>
            <th>M</th>
            <th>T</th>
            <th>W</th>
            <th>T</th>
            <th>F</th>
            <th>S</th>
        </tr>
        </thead>
        <tbody id="calendar-body">
        </tbody>
    </table>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const calendarBody = document.getElementById('calendar-body');
        const monthYearElement = document.getElementById('month-year');

        function createCalendar(year, month) {
            // 清除表体
            calendarBody.innerHTML = '';

            // 创建包含月份和年份的页眉
            monthYearElement.textContent = `${months[month]} ${year}`;

            // 获取该月的第一天
            const lastDay = new Date(year, month + 1, 0);


            // 创建月份的日期行
            let currentDay = 1;
            let currentRow = document.createElement('tr');
            for (let day = 0; day < 42; day++) { // 42 days to cover all possible days in a month
                if (day % 7 === 0 && day !== 0) {
                    calendarBody.appendChild(currentRow);
                    currentRow = document.createElement('tr');
                }

                const cell = document.createElement('td');
                if (currentDay <= lastDay.getDate()) {
                    cell.textContent = currentDay;
                    if (currentDay === new Date().getDate() && month === new Date().getMonth() && year === new Date().getFullYear()) {
                        cell.classList.add('current-day');
                    }
                    currentDay++;
                } else {
                    cell.textContent = '';
                }
                currentRow.appendChild(cell);
            }

            // Append the last row
            calendarBody.appendChild(currentRow);
        }

        // Initial setup
        const today = new Date();
        createCalendar(today.getFullYear(), today.getMonth());

        // Event listeners for previous and next month
        document.querySelector('.prev-month').addEventListener('click', function() {
            createCalendar(today.getFullYear(), (today.getMonth() - 1 + 12) % 12);
        });

        document.querySelector('.next-month').addEventListener('click', function() {
            createCalendar(today.getFullYear(), (today.getMonth() + 1) % 12);
        });
    });


    const months = ['January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December'];
</script>
</body>
</html>
